<template>
  <el-dialog
    title="批量修改价格"
    :visible.sync="visible"
    width="500px"
    append-to-body
  >
    <el-form ref="priceForm" :model="form" label-width="120px">
      <el-form-item label="修改方式" required>
        <div>按比例修改</div>
      </el-form-item>

      <el-form-item label="修改类别范围" required>
        <el-cascader
          v-if="classList.length"
          style="width: 100%"
          :options="classList"
          placeholder="请选择项目类别"
          :props="{
            label: 'categoryName',
            value: 'categoryId',
            children: 'childList',
            emitPath: false,
            multiple: true,
            collapseTags: true,
          }"
          v-model="form.categoryIds"
          filterable
          ref="ClassCascader"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="修改价格" required>
        <el-checkbox-group v-model="form.fields">
          <el-checkbox :label="0">零售价</el-checkbox>
          <el-checkbox :label="1">采购价</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="调整比例" required>
        <el-input-number
          v-model="form.upRatio"
          :precision="0"
          :step="1"
          :min="1"
        >
          <template slot="append">%</template>
        </el-input-number>
        <div class="colorRED" style="line-height: 20px;">调整后价格=原有价格*调整比例，例如调整为原价的80%，直接输入80即可</div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { categoryTree, batchUpdatePrice } from "@/api/service";

export default {
  name: "BatchPrice",
  dicts: ["service_items"],
  data() {
    return {
      loading: false, // loading状态 - 提交按钮loading
      visible: false,
      classList: [], // 类目树
      form: {
        updateType: 0, // 修改方式：0-按比例修改
        fields: [0, 1], // 修改字段：0-零售价 1-采购价
        upRatio: 100, // 调整比例,100表示不变,80表示下调20%,120表示上调20%
        categoryIds: [], // 项目类别ID
      }
    };
  },
  methods: {
    // 打开弹窗
    async openModal() {
      try {
        // 重置表单
        this.classList = [];
        this.form.categoryIds = [];

        // 获取所有服务归属
        const serviceItems = this.dict.type.service_items;
        if(!serviceItems?.length) return;

        // 获取所有类目树
        const { data } = await categoryTree();
        if(!data?.length) return;

        // 根据服务归属重组数据结构
        this.classList = serviceItems.map(service => ({
          categoryId: service.value,
          categoryName: service.label,
          childList: data.filter(item => String(item.serviceItems) === String(service.value))
        })).filter(item => item.childList?.length > 0);

        this.visible = true;
      } catch(error) {
        console.error('获取项目类别失败:', error);
      }
    },

    // 提交表单
    async submitForm() {
      if (!this.form.categoryIds.length) {
        this.$message.error("请选择项目类别");
        return;
      }
      if (!this.form.fields.length) {
        this.$message.error("请选择需要修改的价格类型");
        return;
      }
      if (!this.form.upRatio) {
        this.$message.error("请输入调整比例");
        return;
      }

      const params = {
        updateType: this.form.updateType, // 固定为按比例修改
        fields: this.form.fields,
        upRatio: this.form.upRatio / 100,
        categoryIds: this.form.categoryIds,
      };

      try {
        this.loading = true; // 开始loading
        await batchUpdatePrice(params);
        this.$message.success("修改成功");
        this.visible = false;
        this.$emit('success');
      } catch (error) {
        console.error('批量修改价格失败:', error);
      } finally {
        this.loading = false; // 结束loading
      }
    }
  }
};
</script>
